<template>
	<view class="content">
		<view class="searchbar">
			<view class="searchbar_l">
				<icon  class="sicon" :type="'search'" size="18"/>
				 <input class="uni-input" focus placeholder="请输入商品" @confirm='confire' />
			</view>
			<text>取消</text>
		</view>
		<view class="search_body">
			<image src="../../static/default_icon_search.png" mode="scaleToFill"></image>
			<text class="notice">暂时没有找到商品哦</text>
			<text class="sujest">换个关键词搜搜</text>
		</view>
	</view>

</template>
<script>
	export default {
		data() {
			return {
				
			}
		},
		methods:{
			confire(){
				console.log('确认')
				}
			}
	}
</script>

<style>

	.content{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
	}
	.searchbar{
		position: fixed;
		top: (--window-top)px;
		left: 0rpx;
		width: 100%;
		height: 132rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		box-sizing: border-box;
		padding: 0rpx 30rpx;
}
.searchbar text{
	font-size:28rpx;
	font-family:PingFang SC;
	font-weight:400;
	line-height:34rpx;
	color:rgba(102,102,102,1);
	margin-left: 40rpx;
	margin-right: 40rpx;
	opacity:1;
}
.searchbar_l{
	display: flex;
	flex-direction: row;
	align-items: center;
	flex:1 1 0%;
	background:rgba(247,247,247,1);
	height: 72rpx;
	border-radius: 36rpx;
}
.searchbar_l input{
	font-size:24rpx;
	font-family:PingFang SC;
	font-weight:400;
	color:rgba(51,51,51,1);
}
.sicon{
	margin-left: 20rpx;
	margin-right: 15rpx;
}
.search_body{
	margin-top: 132rpx;
	display: flex;
	flex-direction: column;
	align-items: center;	
	width: 100%;
}
.search_body image{
	width: 350rpx;
	height: 355rpx;
}
.notice{
	font-size:28rpx;
	font-family:PingFang SC;
	font-weight:400;
	color:rgba(102,102,102,1);
}
.sujest{
	font-size:24rpx;
	font-family:PingFang SC;
	font-weight:400;
	line-height:39rpx;
	color:rgba(153,153,153,1);
}
</style>
